﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>疫情大数据分析平台</title>
		<link rel="stylesheet" href="css/comon0.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script>
			$(function () {
				// fontsize 的全局适配
				var whei = $(window).width();
				$("html").css({ fontSize: whei / 20 });
				$(window).resize(function () {
					var whei = $(window).width();
					$("html").css({ fontSize: whei / 20 });
				});

				// 初始化数据
				initData01();
				initData02();
			});

			// 全局变量
			let domain = "http://www.sfac.xyz";

			// 时间定时器
			var t = setTimeout(time, 1000);
			function time() {
				clearTimeout(t);
				dt = new Date();
				var y = dt.getFullYear();
				var mt = dt.getMonth() + 1;
				var day = dt.getDate();
				var h = dt.getHours();
				var m = dt.getMinutes();
				var s = dt.getSeconds();
				$("#showTime").html(y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒");
				t = setTimeout(time, 1000);
			}

			// 初始化数据
			function initData01() {
				$.ajax({
					url: domain + "/api/lately/covids",
					type: "get",
					success: function (rs) {
						var diagnosisSum = 0;
						var deathSum = 0;
						var earaDiagnosisList = [];
						var barX = [];
						var barY = [];

						// 包装数据
						$.each(rs, function (i, item) {
							// 功能一： 渲染统计总数区域
							// 循环结果集，累加确诊数、死亡数
							diagnosisSum += item.diagnosis == null ? 0 : item.diagnosis;
							deathSum += item.death == null ? 0 : item.death;

							// 功能二：渲染整个地图
							// 初始化地图数据，包装省、自治区、直辖市的确诊数
							var temp = {};
							temp.name = item.province;
							temp.value = item.diagnosis;
							earaDiagnosisList.push(temp);

							// 功能三：渲染前七位地区柱状图
							if (i < 7) {
								barX.push(item.province);
								barY.push(item.diagnosis);
							}
						});

						// 调用其他方法，渲染数据
						// 将确诊总数、死亡总数赋值给页面标签
						$("#diagnosisSum").html(diagnosisSum);
						$("#deathSum").html(deathSum);

						// 渲染地图
						initMap(earaDiagnosisList);

						// 渲染柱状图
						initBar(barX, barY);
					},
					error: function (err) {
						console.log(err);
					},
				});
			}

			function initData02() {
				$.ajax({
					url: domain + "/api/province/covids?province=重庆",
					type: "get",
					success: function (rs) {
						var lineX = [];
						var lineYDiagnosis = [];
						var lineYCure = [];
						var lineYDeath = [];
						// 包装数据
						$.each(rs, function (i, item) {
							lineX.push(item.statisticalTime);
							lineYDiagnosis.push([item.statisticalTime, item.diagnosis]);
							lineYCure.push([item.statisticalTime, item.cure]);
							lineYDeath.push([item.statisticalTime, item.death]);
						});

						// 渲染折线图
						initLines(lineX, lineYDiagnosis, lineYCure, lineYDeath);
					},
					error: function (err) {
						console.log(err);
					},
				});
			}

			// 初始化折线图
			function initLines(lineX, lineYDiagnosis, lineYCure, lineYDeath) {
				var optionLine = {
					tooltip: {
						trigger: "axis",
						axisPointer: {
							lineStyle: {
								color: "#dddc6b",
							},
						},
					},
					legend: {
						top: "0%",
						data: ["确诊数", "治愈数", "死亡数"],
						textStyle: {
							color: "rgba(255,255,255,.5)",
							fontSize: "12",
						},
					},
					xAxis: {
						// value、category、time、log
						type: "time",
						min: new Date(lineX[0]),
						max: new Date(lineX[6]),
						interval: 24 * 60 * 60 * 1000,
						axisLabel: {
							interale: 0,
							rotate: 40, // 倾斜度
							color: "white",
							formatter: function (value) {
								var t_date = new Date(value);
								return [t_date.getMonth() + 1, t_date.getDate()].join("-");
							},
						},
					},
					yAxis: [
						{
							type: "value",
							axisTick: { show: false },
						},
					],
					series: [
						{
							name: "确诊数",
							type: "line",
							smooth: true,
							data: lineYDiagnosis,
						},
						{
							name: "治愈数",
							type: "line",
							smooth: true,
							data: lineYCure,
						},
						{
							name: "死亡数",
							type: "line",
							smooth: true,
							data: lineYDeath,
						},
					],
				};

				// 初始化柱状图
				var myChart = echarts.init(document.getElementById("echart4"));
				// 柱状图设置
				myChart.setOption(optionLine);
			}

			// 初始化柱状图
			function initBar(barX, barY) {
				var optionBar = {
					tooltip: {
						trigger: "axis",
						axisPointer: {
							type: "shadow",
						},
					},
					grid: {
						left: "0%",
						top: "10px",
						right: "0%",
						bottom: "4%",
						containLabel: true,
					},
					xAxis: [
						{
							type: "category",
							data: barX,
							axisLine: {
								show: true,
								lineStyle: {
									color: "rgba(255,255,255,.1)",
									width: 1,
									type: "solid",
								},
							},
							axisTick: {
								show: false,
							},
							axisLabel: {
								interval: 0,
								show: true,
								textStyle: {
									color: "rgba(255,255,255,.6)",
									fontSize: "12",
								},
							},
						},
					],
					yAxis: [
						{
							type: "value",
							axisLabel: {
								show: true,
								textStyle: {
									color: "rgba(255,255,255,.6)",
									fontSize: "12",
								},
							},
							axisTick: {
								show: false,
							},
							axisLine: {
								show: true,
								lineStyle: {
									color: "rgba(255,255,255,.1	)",
									width: 1,
									type: "solid",
								},
							},
							splitLine: {
								lineStyle: {
									color: "rgba(255,255,255,.1)",
								},
							},
						},
					],
					series: [
						{
							type: "bar",
							data: barY,
							barWidth: "35%", //柱子宽度
							itemStyle: {
								normal: {
									color: "#2f89cf",
									opacity: 1,
									barBorderRadius: 5,
								},
							},
						},
					],
				};

				// 初始化柱状图
				var myChart = echarts.init(document.getElementById("echart1"));
				// 柱状图设置
				myChart.setOption(optionBar);
			}

			// 初始化地图
			function initMap(earaDiagnosisList) {
				var optionMap = {
					// 弹出框
					tooltip: {
						trigger: "item",
					},
					//配置属性
					series: [
						{
							name: "确诊数",
							type: "map",
							mapType: "china",
							// roam: true,
							label: {
								normal: {
									show: true,
								},
							},
							itemStyle: {
								normal: {
									areaColor: "#4c60ff",
									borderColor: "#002097",
								},
							},
							data: earaDiagnosisList,
						},
					],
				};

				// 初始化地图
				var myChart = echarts.init(document.getElementById("map_1"));
				// 地图设置
				myChart.setOption(optionMap);
			}
		</script>
	</head>
	<body>
		<div class="head">
			<h1>新冠病毒可视化中心</h1>
			<div class="weather">
				<!-- <img src="picture/weather.png" /><span>多云转小雨</span> -->
				<span id="showTime"></span>
			</div>
		</div>
		<div class="mainbox">
			<ul class="clearfix">
				<li>
					<div class="boxall" style="height: 3.2rem">
						<div class="alltitle">确诊数 Top 7</div>
						<div class="allnav" id="echart1"></div>
						<div class="boxfoot"></div>
					</div>
					<div class="boxall" style="height: 3.2rem">
						<div class="sy" id="fb1"></div>
						<div class="sy" id="fb2"></div>
						<div class="sy" id="fb3"></div>
						<div class="boxfoot"></div>
					</div>
					<div class="boxall" style="height: 3.2rem">
						<div class="alltitle">模块标题样式</div>
						<div class="allnav" id="echart2"></div>
						<div class="boxfoot"></div>
					</div>
				</li>
				<li>
					<div class="bar">
						<div class="barbox">
							<ul class="clearfix">
								<li class="pulll_left counter" id="diagnosisSum"></li>
								<li class="pulll_left counter" id="deathSum"></li>
							</ul>
						</div>
						<div class="barbox2">
							<ul class="clearfix">
								<li class="pulll_left">总确诊数</li>
								<li class="pulll_left">总死亡数</li>
							</ul>
						</div>
					</div>
					<div class="map">
						<div class="map1"><img src="picture/lbx.png" /></div>
						<div class="map2"><img src="picture/jt.png" /></div>
						<div class="map3"><img src="picture/map.png" /></div>
						<div class="map4" id="map_1"></div>
					</div>
				</li>
				<li>
					<div class="boxall" style="height: 3.4rem">
						<div class="alltitle">重庆最近七天数据</div>
						<div class="allnav" id="echart4"></div>
						<div class="boxfoot"></div>
					</div>
					<div class="boxall" style="height: 3rem">
						<div class="alltitle">模块标题样式</div>
						<div class="allnav" id="echart6"></div>
						<div class="boxfoot"></div>
					</div>
					<div class="boxall" style="height: 3.2rem">
						<div class="alltitle">模块标题样式</div>
						<div class="allnav" id="echart5"></div>
						<div class="boxfoot"></div>
					</div>
				</li>
			</ul>
		</div>
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script type="text/javascript" src="js/china.js"></script>
		<script language="JavaScript" src="js/js.js"></script>
		<script type="text/javascript" src="js/area_echarts.js"></script>
	</body>
</html>
